<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>
    <%=title %>
  </title>
  <style type="text/css">
    body {
      color: #333333;
      font-family: tahoma, arial, 宋体, helvetica, sans-serif;
    }

    #main {
      margin-top: 50px;
      margin-right: auto;
      margin-left: auto;
      width: 80%;
      text-align: center;
      min-height: 500px;
    }

    h3 {
      text-align: center;
    }

    .upbox {
      width: 100%;
    }

    .tips {
      color: red;
      font-size: 12px;
      line-height: 25px;
      text-align: center;
    }

    .up {
      display: flex;
      justify-content: center;
      margin-top: 25px;
    }

    .up button {
      margin-left: 10px;
    }

    .up input {
      margin-right: 10px;
    }

    .parameterbox {
      margin-top: 50px;
    }

    button {
      cursor: pointer;
    }

    #loading {
      display: none;
      margin: 20px auto;
      font-size: 12px;
      color: red;
    }

    #count {
      display: none;
      font-size: 18px;
      margin-top: 30px;
      font-style: initial;
    }

    #count span {
      font-weight: bold;
      margin: 0 10px;
    }

    .download {
      margin-top: 50px;
    }

    #current-url {
      display: none;
      font-size: 14px;
      margin-top: 30px;
      line-height: 40px;
    }

    h2 {
      display: none;
      color: red
    }

    ul {
      list-style: none;
      padding-left: 0;
      max-height: 250px;
      overflow-y: scroll;
      margin: 0;
      scrollbar-width: none;
    }

    ul::-webkit-scrollbar {
      display: none;
    }

    ul li {
      line-height: 31px;
      height: 31px;
      font-size: 14px;
    }

    .error {
      display: none;
      margin: 50px auto;
      width: 80%;
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: black;
      color: white;
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="upbox">
      <p class="tips">tips: 选择 xlsx 文件，文件最好不要过大，最好数据在 1000 条左右，分批次进行爬取！！ </p>
      <p class="up">
        <input id="file" type="file" accept=".xls,.xlsx" name="files">
        <button id="uploadBtn">开始上传</button>
      </p>
    </div>
    <div class="parameterbox">
      <button id="reptileBtn">开始爬虫公司中文名</button>
    </div>
    <div>
      <p id="loading">正在努力的爬取数据，请稍等！！</p>
    </div>
    <div id="current-url">当前爬取地址：<span></span></div>
    <div id="count">已经处理数据<span>50</span>条数</div>
    <h2>数据写入文件成功，可以下载导出文件啦！！</h2>
    <div class="error">
      <ul id="err">
      </ul>
    </div>
    <div class="download">
      <button id="downloadBtn">下载导出数据</button>
    </div>
  </div>
  <h3>请勿用于商业推广以及其他获利用途，如有版权问题请告知删除!</h3>
  <script>
    const uploadBtn = document.getElementById("uploadBtn");
    const uploadFile = document.getElementById("file");
    const downloadBtn = document.getElementById("downloadBtn")
    const loading = document.getElementById("loading");
    const countBom = document.getElementById("count");
    const countSpan = document.querySelector("#count span");
    const curl = document.getElementById("current-url");
    const urlDom = document.querySelector("#current-url span");
    const h2 = document.querySelector("h2");
    const error = document.querySelector("error");
    const err = document.querySelector("#err");

    let isUploadFile = false; // 是否上传文件
    let isDisableDownLoad = true;  // 是否禁用下载

    // 即时通讯服务
    // var socket = io();
    // 监听每条完成时播报
    // socket.on("everyMsg", count => {
    //   console.log(count);
    //   countSpan.innerHTML = count;
    //   countBom.style.display = "block";
    // });
    // 监听当前的网页地址
    // socket.on("searchMsg", url => {
    //   // console.log(url)
    //   urlDom.innerHTML = url;
    //   curl.style.display = "block";
    // });
    // 监听爬取完成时播报
    // socket.on("successMsg", msg => {
    //   // console.log(msg);
    //   loading.innerHTML = msg;
    //   loading.style.display = "block";
    // });
    // 监听写入完成时播报
    // socket.on("writeMsg", msg => {
    //   console.log(msg);
    //   isDisableDownLoad = false;
    //   h2.innerHTML = msg;
    //   h2.style.display = "block";
    // })
    // 监听错误页面时播报
    // socket.on("errorMsg", url => {
    //   // console.log(url);
    //   error.style.display = "block";
    //   const li = document.createElement("li");
    //   li.innerHTML = '爬取错误地址' + url;
    //   err.appendChild(li)
    // })

    // 1.上传文件
    uploadBtn.addEventListener("click", () => {
      const filelist = uploadFile.files; // 文件列表
      if (!filelist.length) {
        return alert("请选择需要上传的文件")
      }
      const file = filelist[0];  // 获取文件
      if (file.size > 1024 * 1024 * 5) {
        return alert("请选择小于5M的文件")
      }
      let formData = new FormData();
      formData.append('excel', file);
      formData.append('type', "findCompany")
      upload(formData);
    })
    async function upload(formData) {
      const resp = await fetch("/api/upload", {
        method: "POST", // 文件数据一般都是 post 请求可以存放二进制数据
        body: formData,
      });
      try {
        if (resp.status !== 200) {
          return alert("文件上传失败啦")
        }
        const { data } = await resp.json();
        isUploadFile = true; // 说明已经上传文件
        return alert(data.message);
      } catch (e) {
        return alert("文件上传失败啦")
      }
    }

    // 2.参数配置
    const reptileBtn = document.getElementById("reptileBtn");
    reptileBtn.addEventListener("click", () => {
      // if (!isUploadFile) {
      //   return alert("请先选择上传文件才能进行爬虫处理")
      // }
      fetch(`/api/zhcCompanyName`, {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
      })
        .then((res) => res.json())
        .then(res => {
          // loading.innerHTML = res.msg;
          // loading.style.display = "block";
        })
    });

    // 3.下载文件
    downloadBtn.addEventListener("click", () => {
      if (!isUploadFile) {
        return alert("请先选择上传文件才能进行爬虫处理")
      }
      if (isDisableDownLoad) {
        return alert("数据还没有爬取完成，请爬取完成在下载导出");
      }
      window.open(`${origin}/api/download`)
    })
  </script>
</body>

</html>
